<template>
  <a v-if="isExternalLink" :href="to" target="_blank" rel="noopener"><slot/></a>
  <router-link v-else :to="to" v-bind="$props"><slot/></router-link>
</template>

<script>
import {RouterLink} from 'vue-router'
import {computed} from 'vue'

export default {
  props:{
    ...RouterLink.props
  },
  setup(props){
    const isExternalLink = computed(() => {
      return typeof props.to === 'string' && /^(https?:)?\/\//.test(props.to)
    })

    return {
      isExternalLink,
      to: props.to
    }
  }
}
</script>

